@extends('owner.base')

@section('content')
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <form class="layui-form">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" name="phone" placeholder="手机号" class="layui-input"/>
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" name="car_no" placeholder="车牌号" class="layui-input"/>
                    </div>
                </div>

                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="searchBtn" id="searchBtn">搜 索</button>
                </div>

            </form>

        </div>

        <table id="dataTable"></table>

    </div>
@endsection

@section('script')

    <script>
        layui.use(['layer', 'table', 'form', 'laydate'], function () {
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;

            //用户表格初始化
            var dataTable = table.render({
                elem: '#dataTable'
                , height: 500
                , url: "{{ route('owner.driver.sendlogdata') }}" //数据接口
                , page: true //开启分页
                , cols: [[ //表头
                    {field: 'id', title: 'ID'}
                    , {field: 'phone', title: '手机号'}
                    , {field: 'car_no', title: '车牌号'}
                    , {field: 'msg', title: '发送内容'}
                    , {field: 'desc', title: '发送状态'}
                    , {field: 'created_at', title: '发送时间'}
                ]]
            });

            // 搜索
            form.on('submit(searchBtn)', function (data) {
                //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

                var fields = data.field;
                dataTable.reload({
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                    where: fields // 搜索字段
                });

                return false; //阻止表单跳转
            });

        })
    </script>

@endsection